/******************************************************************
Site Name:
Author:

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
COLORS
Need help w/ choosing your colors? Try this site out:
http://0to255.com/
*********************/
/*
Here's a great tutorial on how to
use color variables properly:
http://sachagreif.com/sass-color-variables/
*/
.site-banner {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding-bottom: 0;
}

@media only screen and (max-width: 768px) {
  .site-banner {
    background-image: none !important;
  }
}

@media only screen and (min-width: 768px) {
  .site-banner {
    min-height: 350px;
    max-height: 400px;
    background-color: transparent !important;
    padding-bottom: 2rem;
  }
}

@media only screen and (min-width: 1366px) {
  .site-banner {
    min-height: 575px;
    max-height: 600px;
  }
}

.site-banner .background-image {
  width: 100%;
}

.site-banner .img-container {
  display: block;
  padding: 0 !important;
}

.site-banner .img-container img {
  margin-bottom: 0;
  width: 100%;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .site-banner .img-container {
    display: none;
  }
}

.site-banner .wrap > div {
  padding: 1% 2%;
}

@media only screen and (min-width: 768px) {
  .site-banner .wrap {
    min-height: 350px;
    max-height: 400px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: start;
    -webkit-box-pack: start;
            justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;
  }
}

@media only screen and (min-width: 1366px) {
  .site-banner .wrap {
    min-height: 575px;
    max-height: 600px;
  }
}

.site-banner .wrap h1 {
  font-size: 2rem;
  line-height: 1.1em;
  line-height: 1em;
  font-weight: 700;
  color: #374bff;
  margin: 0;
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .site-banner .wrap h1 {
    font-size: clamp(2rem, 7vw, 96px);
    padding-left: 2.5rem;
  }
}

.site-banner .wrap h1 strong {
  font-weight: bolder;
}

@media only screen and (min-width: 599px) {
  .site-banner .wrap ul, .site-banner .wrap p, .site-banner .wrap h1, .site-banner .wrap h2, .site-banner .wrap h3, .site-banner .wrap h4 {
    width: 65%;
    padding-left: 2.5rem;
  }
}

.site-banner .wrap ul li, .site-banner .wrap p li, .site-banner .wrap h1 li, .site-banner .wrap h2 li, .site-banner .wrap h3 li, .site-banner .wrap h4 li {
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 1030px) {
  .site-banner.center .wrap {
    min-height: inherit;
    display: block;
  }
}

.site-banner.center h1 {
  text-align: center;
  margin: auto;
  margin-bottom: 0;
  text-transform: initial;
}

@media only screen and (min-width: 768px) {
  .site-banner.center h1 {
    font-size: 2.65rem;
    width: 95%;
    padding-left: 0;
  }
}

@media only screen and (max-width: 599px) {
  .site-banner + * {
    margin-top: 1rem !important;
  }
}

@media only screen and (max-width: 599px) {
  .site-banner + .hide-on-mobile + * {
    margin-top: 1rem !important;
  }
}

/*# sourceMappingURL=../maps/blocks/site-banner.css.map */